<template>

    <el-row>
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
            <el-form-item label="昵称" prop="nickname">
                <el-input v-model="queryParams.nickname" placeholder="请输入昵称" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="small" @click="queryList">搜索</el-button>

            </el-form-item>
        </el-form>
    </el-row>

    <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" size="small" @click="showEdit = true">新增</el-button>
        </el-col>

    </el-row>

    <el-row v-loading="loading">

        <el-table :data="tableData">

            <!-- <el-table-column prop="userid" label="用户id" /> -->
            <el-table-column prop="userid" label="用户id" type="index" width="120" />
            <el-table-column prop="username" label="用户名" align="center" />
            <el-table-column prop="nickname" label="昵称" />

        </el-table>
        <el-pagination layout="sizes ,prev, pager, next, jumper, ->, total," :total="queryParams.total"
            v-model:page-size="queryParams.size" v-model:current-page="queryParams.current" @current-change="queryList"
            @size-change="queryList" :page-sizes="[2, 3, 5, 10, 20, 30, 40, 50, 100]" />
    </el-row>


    <el-dialog v-model="showEdit" title="用户编辑" style="width: 800px;">
        <Edit v-if="showEdit" v-model:showEdit="showEdit" />
    </el-dialog>





</template>

<script setup name="User">
import { onMounted } from 'vue'

import { ref } from 'vue'

import Edit from '../edit.vue'
//导入crud的API接口
import { listUser } from '@/api/permission/user/index'


//定义数据

//表格数据
const tableData = ref([])

//表格 loading 加载状态， true 转圈， false 取消loading

const loading = ref(false);

//是否展示修改 的表单
const showEdit = ref(false)

//查询条件
const queryParams = ref({
    nickname: '',
    size: 10,
    current: 1,
    total: 0
})


/**
 * 查询分页表格
 */
// function queryList() {
//     loading.value = true
// listUser(queryParams.value)

//     .then(page => {
//         loading.value = false
//         tableData.value = page.records;
//         queryParams.value.total = page.total;
//     })
//     .catch(error => {
//         console.log("errr" + error)
//     })



// listUser(queryParams.value)

//     .then(page => {
//         loading.value = false
//         tableData.value = page.records;
//         queryParams.value.total = page.total;
//     },error => {
//         console.log("errr" + error)
//     })


// }

/**
 * 使用await 关键字，将返回Promise对象的异步方法变成同步方法
 */
async function queryList() {
    loading.value = true
    try {
        const page = await listUser(queryParams.value)
        loading.value = false
        tableData.value = page.records;
        queryParams.value.total = page.total;
    } catch (e) {

    }
}




//加载当前页面完成之后 查询
onMounted(() => {
    queryList()
})


</script>

<style scoped></style>
